<!DOCTYPE html>
<html lang="en">
  <head>
    <title>在线音乐播放器</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,700,900"> 
    <link rel="stylesheet" href="fonts/icomoon/style.css">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/jquery-ui.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/mediaelementplayer.min.css">


    <link rel="stylesheet" href="css/aos.css">

    <link rel="stylesheet" href="css/style.css">
    
  </head>
  <body>
  
  <div class="site-wrap">

    <div class="site-mobile-menu">
      <div class="site-mobile-menu-header">
        <div class="site-mobile-menu-close mt-3">
          <span class="icon-close2 js-menu-toggle"></span>
        </div>
      </div>
      <div class="site-mobile-menu-body"></div>
    </div>


    <header class="site-navbar py-4 absolute transparent" role="banner">

      <div class="container">
        <div class="row align-items-center">
          

          <div class="col-3" data-aos="fade-down">
            <h1><a href="#" class="text-white h2">Music</a></h1>
          </div>
          <div class="col-9" data-aos="fade-down">
            <nav class="site-navigation position-relative text-right text-md-right" role="navigation">

                

                <div class="d-inline-block ml-md-0 mr-auto py-3"><a href="#" class="site-menu-toggle js-menu-toggle text-white"><span class="icon-menu h3"></span></a></div>

                <ul class="site-menu js-clone-nav d-none">
                  <li>
                    <a href="index.html">主页</a>
                  </li>
                  <li><a href="collect.html">我的收藏</a></li>
                  <li><a href="user/logout">退出登录</a></li>
                </ul>
            </nav>


          </div>

        </div>
      </div>
      
    </header>

    <div class="site-blocks-cover overlay" style="background-image: url(images/hero_bg_1.jpg);" data-aos="fade" data-stellar-background-ratio="0.5">
      <div class="container">
        <div class="row align-items-center justify-content-center text-center">

          <div class="col-md-8" data-aos="fade-up" data-aos-delay="400">
            <h2 class="text-white font-weight-light mb-2 display-4">在线音乐播放器</h2>
            <div class="text-white mb-4"><span class="text-white-opacity-05"><small>By ManChen | 22 July 2023 | 16:16:20</small></span></div>
            <p><a href="#" class="btn btn-primary btn-sm py-3 px-4 small">项目链接</a></p>

          </div>
        </div>
      </div>
    </div>  


    <div class="site-section bg-light">
      <div class="container" id="head">

        <div class="row mb-5" data-aos="fade-up">
          <div class="col-md-12 text-center">
            <h2 class="font-weight-bold text-black">音乐列表</h2>
          </div>
        </div>
        
        <div class="mylist">
          <div>
            <div class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">歌曲名</label>
                    <input name="name" type="text" style="margin: 5px;" id="exampleInputName2" >
                </div>
                <submit id="submit1" type="button" class="btn btn-primary">查询</submit>
            </div>
        </div>

          <div class="buttonList">
            <a class="btn btn-primary" href="collect.html">喜欢列表</a>
            <a class="btn btn-primary" href="upload.html">添加歌曲</a>
            <button class="btn btn-primary" id="deleteMore" >删除选中</button>
          </div>
        </div>

        <div id="list23"></div>
          <!-- <div class="d-block d-md-flex podcast-entry bg-white mb-5" data-aos="fade-up">
            <img src="images/img_1.jpg" class="image">
            <div class="text">
              <input id="1" type="checkbox" class="checkbox">
              <h3 class="font-weight-light">歌名</h3>
              <div class="text-white mb-3"><span class="text-black-opacity-05"><small>作者</small><span class="sep">/</span><small>时间</small></span></div>
              <input type="button" class="btn btn-primary" style="margin: 5px;" value="收藏音乐" id="collect">
              <input type="button" class="btn btn-primary" style="margin: 5px;" value="删除音乐" id="delete">
              <div class="player" style = "visibility: visible;">
                <audio id="player2" preload="none" controls style="max-width: 100%">
                  <source src="http://www.largesound.com/ashborytour/sound/AshboryBYU.mp3" type="audio/mp3">
                </audio>
              </div>
            </div>
        </div> -->
        </div>
        <div class="paging">
          <button class="btn btn-primary" id="firstButton">首页</button>
          <button class="btn btn-primary" id="preButton">上一页</button>
          <button class="btn btn-primary" id="nextButton">下一页</button>
          <button class="btn btn-primary" id="lastButton">尾页</button>
        </div>


    <footer class="site-footer border-top">
        <div class="row pt-2 mt-4 text-center">
          <div class="col-md-12">
            <p>
            <!-- Link back to  can't be removed. Template is licensed under CC BY 3.0. -->
            Mc Finished It &copy;<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>document.write(new Date().getFullYear());</script>
            <!-- Link back to  can't be removed. Template is licensed under CC BY 3.0. -->
            </p>
          </div>
        </div>
    </footer>
    </div>

  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/jquery-migrate-3.0.1.min.js"></script>
  <script src="js/jquery-ui.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script src="js/jquery.stellar.min.js"></script>
  <script src="js/jquery.countdown.min.js"></script>
  <script src="js/jquery.magnific-popup.min.js"></script>
  <script src="js/aos.js"></script>

  <script src="js/mediaelement-and-player.min.js"></script>
    <!-- <script>
          document.addEventListener('DOMContentLoaded', function() {
                  var mediaElements = document.querySelectorAll('#player2'), total = mediaElements.length;
  
                  for (var i = 0; i < total; i++) {
                      new MediaElementPlayer(mediaElements[i], {
                          pluginPath: 'https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/',
                          shimScriptAccess: 'always',
                          success: function () {
                              var target = document.querySelectorAll('.player'), targetTotal = target.length;
                              for (var j = 0; j < targetTotal; j++) {
                                  target[j].style.visibility = 'visible';
                              }
                    }
                  });
                  }
              });
        }
        
      </script> -->
  <script src="js/main.js"></script>
    
    <script>
      // 页面下标(初始为1)
      let pageIndex = 1;
      // 总音乐数
      let totalMusic = 0;
      // 单个页面最大个数(这里我设置的是3,可根据自己喜欢设置)
      let pageSize = 3;
      
      // 加载页面的时候, 会触发一个不带musicName的load请求
      $(function(){load()});

      let whereNow = 1;
      function load() {
        if(whereNow == 2) {
          pageIndex = 1;
          whereNow = 1;
        }
        $.ajax({
          url: 'music/findMusic',
          method: 'POST',
          // 传递的时候就需要传递页面下标
          data: {"pageIndex":pageIndex},
          dataType: "json",
          success: function(data,status) {
            if(data.data != null){
              // 每次加载的时候, 记录音乐总数
              totalMusic = data.data.totalMusic;
              createMusic1(data.data.list);
              let audios = document.querySelectorAll('#player2');
              for(let audio of audios) {
                new MediaElementPlayer(audio, {
                              pluginPath: 'https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/',
                              shimScriptAccess: 'always',
                              success: function () {
                                let play = document.querySelector('.player');
                                play.style = "visibility: visible;";
                              }
                });
              }
            }
          }
        })
      }

      function searchMessage(musicName){
        if(whereNow == 1){
          whereNow = 2;
          pageIndex = 1;
        }
        $.ajax({
          url: 'music/findMusic',
          method: 'POST',
          // 传递的时候就需要传递页面下标
          data: {"name":musicName,"pageIndex":pageIndex},
          dataType: "json",
          success: function(data,status) {
            if(data.data != null){
              // 每次加载的时候, 记录音乐总数
              totalMusic = data.data.totalMusic;
              createMusic1(data.data.list);
              let audios = document.querySelectorAll('#player2');
              for(let audio of audios) {
                new MediaElementPlayer(audio, {
                              pluginPath: 'https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/',
                              shimScriptAccess: 'always',
                              success: function () {
                                let play = document.querySelector('.player');
                                play.style = "visibility: visible;";
                              }
                });
              }
            }
          }
        })
      }
      function createMusic1(lists) {
        let s = '';
        for(let list of lists) {
            s+= '<div class="d-block d-md-flex podcast-entry bg-white mb-5" data-aos="fade-up">';
            s+= '<img src="'+list.imgpath+'" class="image">';
            s+= '<div class="text">';
            s+= '<input id="'+list.musicId+'" type="checkbox" class="checkbox">';
            s+= '<h3 class="font-weight-light">'+list.title+'</h3>';
            s+= '<div class="text-white mb-3"><span class="text-black-opacity-05"><small>'+list.author+'</small><span class="sep">/</span><small>'+DateFormat(list.uploadtime)+'</small></span></div>';
            s+= '<input type="button" class="btn btn-primary" style="margin: 5px;" value="收藏音乐" onclick="collectMusic(\''+list.musicId+'\')">';
            s+= '<input type="button" class="btn btn-primary" style="margin: 5px;" value="删除音乐" onclick="deleteMusic(\''+list.musicId+'\')">';
            s+= '<div class="player">';
            s+= '<audio id="player2" preload="none" controls style="max-width: 100%">';
            s+= '<source src="'+ list.path+'.mp3'+'" type="audio/mp3">';
            s+= '</audio></div></div></div>';
        }
        $("#list23").html(s);
      }
      function createMusic(lists) {
        let head = document.querySelector('#head');
        for(let list of lists) {
          // 第一个div
          let div1 = document.createElement('div');
          div1.className = "d-block d-md-flex podcast-entry bg-white mb-5";
          $('.d-block .d-md-flex .podcast-entry .bg-white .mb-5').attr('data-aos','fade-up');
          // 音乐图片
          let src = document.createElement('img');
          src.className = "image";
          src.src = "images/img_1.jpg";
          div1.appendChild(src);
          // 第二个div
          let div2 = document.createElement('div');
          div2.className = "text";
          // 复选框
          let input = document.createElement('input');
          input.id = list.musicId;
          input.type = "checkbox";
          input.className = "checkbox";
          div2.appendChild(input);
          // 歌名
          let h3 = document.createElement('h3');
          h3.className = "font-weight-light";
          h3.innerHTML = list.title;
          div2.appendChild(h3);
          // 第三个div 歌手和时间
          let div3 = document.createElement('div');
          div3.className = "text-white mb-3";
          let span1 = document.createElement('span');
          span1.className = "text-black-opacity-05";
          let small1 = document.createElement('small');
          small1.innerHTML = list.author;
          let span2 = document.createElement('span');
          span2.className = "sep";
          span2.innerHTML = "/";
          let small2 = document.createElement('small');
          small2.innerHTML = DateFormat(list.uploadtime);
          span2.appendChild(small2);
          small1.appendChild(span2);
          span1.appendChild(small1);
          div3.appendChild(span1);
          div2.appendChild(div3);
          // 收藏按钮
          let input1 = document.createElement('input');
          input1.type="button";
          input1.className="btn btn-primary";
          input1.style="margin: 5px;";
          input1.value="收藏音乐";
          input1.onclick="collectMusic('\'+list.musicId+'\')";
          div2.appendChild(input1);
          // 删除按钮
          let input2= document.createElement('input');
          input2.type="button";
          input2.className="btn btn-primary";
          input2.style="margin: 5px;";
          input2.value="删除音乐";
          input2.onclick="deleteMusic("+list.musicId+")";
          div2.appendChild(input2);
          // div4
          let div4 = document.createElement('div');
          div4.className="player";
          // 播放器
          let audio = document.createElement('audio');
          audio.id="player2";
          audio.style="max-width: 100%";
          audio.preload="none";
          audio.controls="controls";
          let source = document.createElement('source');  
          source.src=list.path+".mp3";
          source.type="audio/mp3";
         
          audio.appendChild(source);
          div4.appendChild(audio);
          div2.appendChild(div4);
          div1.appendChild(div2);

          head.appendChild(div1);
        }

      }

      // 把毫秒级时间戳转化成格式化日期
      function DateFormat(timeStampMS) {
            var date = new Date(timeStampMS);
 
            var year = date.getFullYear(),
                month = date.getMonth()+1,//月份是从0开始的
                day = date.getDate(),
                hour = date.getHours(),
                min = date.getMinutes(),
                sec = date.getSeconds();
            var newTime = year + '-' +
                        (month < 10? '0' + month : month) + '-' +
                        (day < 10? '0' + day : day) + ' ' +
                        (hour < 10? '0' + hour : hour) + ':' +
                        (min < 10? '0' + min : min) + ':' +
                        (sec < 10? '0' + sec : sec);
        
            return newTime;
        }

        function collectMusic(musicId) {
          $.ajax({
            url: "collect/loveMusic",
            method: "post",
            data:{"musicId":musicId},
            dataType: "json",
            success:function(data,status){
              if(data.status == 1) {
                alert(data.message);
                location.assign("collect.html");
              }else{
                alert(data.message);
              }
            }
          })
        }

        function deleteMusic(musicId) {
          $.ajax({
            url: "music/delete",
            method: "post",
            data:{"musicId":musicId},
            dataType: "json",
            success:function(data,status) {
              if(data.status == 1) {
                alert(data.message);
                location.assign("index.html");
              }else{
                alert(data.message);
              }
            }
          })
        }



        
    $(function(){
        $("#submit1").click( function(){
            var name = $("#exampleInputName2").val();
            console.log(name);
            searchMessage(name);
        });
    });

    $(function(){
      $.when(load).done(function() {
        $("#deleteMore").click(function(){
          let musicId = new Array();
          let i =0;
          $("input:checkbox").each(function(){
            if($(this).is(":checked")) {
              musicId[i] = $(this).attr("id");
              i++;
            }
          });

          $.ajax({
            url: "music/deleteMore",
            method: "post",
            data:{"musicId":musicId},
            dataType:"json",
            success:function(data,status) {
              if(data.status == 1) {
                alert(data.message);
                location.assign("index.html");
              }else{
                alert(data.message);
              }
            }
          })
        })
      })
    })

    let firstButton = document.querySelector("#firstButton");
    firstButton.onclick = function(){
      // 首先判定当前页面是否是首页
      if(pageIndex == 1) {
        alert("当前已经是首页");
        return;
      }
      // 这里不是首页,需要回到首页, 让下标变为1
      pageIndex = 1;
      var name = $("#exampleInputName2").val();
      if(whereNow == 1){
        load();
      }else if(whereNow == 2){
        searchMessage(name);
      }
    }

    let lastButton = document.querySelector("#lastButton");
    lastButton.onclick = function() {
      // 这里判定当前页面是不是尾页, 还需要判断当前totalMusic是否为0, 如果为0, 也应该是尾页
      if(pageIndex == Math.ceil(totalMusic / pageSize) || totalMusic == 0){
        alert("当前已经是尾页");
        return;
      }
      // 不是尾页, 就设置下标为尾页
      pageIndex = Math.ceil(totalMusic / pageSize);
      var name = $("#exampleInputName2").val();
      if(whereNow == 1){
        load();
      }else if(whereNow == 2){
        searchMessage(name);
      }
    }

    let preButton = document.querySelector("#preButton");
    preButton.onclick = function() {
      // 判定当前是否为首页
      if(pageIndex == 1){
        alert("当前已经是最前页了");
        return;
      }
      // 不是首页, 就让下标 -1
      pageIndex = pageIndex - 1;
      var name = $("#exampleInputName2").val();
      if(whereNow == 1){
        load();
      }else if(whereNow == 2){
        searchMessage(name);
      }
    }

    let nextButton = document.querySelector("#nextButton");
    nextButton.onclick = function() {
      // 这里判断下标是不是尾页, 还需要判断当前totalMusic是否为0, 如果为0, 也应该是尾页
      if(pageIndex == Math.ceil(totalMusic / pageSize) || totalMusic == 0){
        alert("当前已经是最后页了");
        return;
      }
      // 设置下标为下一页
      pageIndex = pageIndex + 1;
      var name = $("#exampleInputName2").val();
      if(whereNow == 1){
        load();
      }else if(whereNow == 2){
        searchMessage(name);
      }
    }
    </script>
  
  
  </body>
</html>